<template>
  <div class="wh100 formBox">
    <div style="margin-top: 20.5vw">
      <img style="width: 73.3vw" src="../../assets/image/loginTitle.png">
    </div>
    <van-form>
      <van-field
          v-model="password"
          name="姓名"
          label=""
          style="font-size: 0.5rem"
          placeholder="姓名"/>
      <van-field
          v-model="username"
          name="工号"
          label=""
          style="font-size: 0.5rem"
          placeholder="工号"/>
      <div>
        <img style="width: 65.2vw;margin-top: 20px" @click="onSubmit"
             src="../../assets/image/login.png" alt="">
      </div>
    </van-form>
  </div>
</template>

<script>
import {login} from "@/api/login";
import {getToken, setToken} from "@/utils/auth";

export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    onSubmit() {
      let params = {
        username: this.username,
        password: this.password
      };
      login(params).then(res => {
        if (res.code == 200) {
          setToken(res.data);
          localStorage.setItem("myUserName", params.username);
          localStorage.setItem("myPassword", params.password);
          localStorage.setItem("isreload", "true");
          localStorage.setItem("isLogin", "true");
          this.$router.push({path: "/home"});
          this.$store.commit("changeaudioPlay", "true");
        } else {
          this.$toast(res.message);
        }

      });
    }
  },
  mounted() {
    document.getElementsByClassName("formBox")[0].style.minHeight = window.innerHeight + "px";
    document.getElementById("bgAudioBox").style.display = 'none';
    this.username = localStorage.getItem("myUserName");
    this.password = localStorage.getItem("myPassword");
  }
};
</script>

<style scoped lang="scss">
.formBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-image: url("@/assets/image/loginBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;

  .van-cell {
    width: 65.2vw;
    //background: red;
    border-radius: 46px 46px 46px 46px;
    opacity: 1;
    margin-top: 10px;
    padding: 0.5rem;

    ::v-deep.van-cell__title {
      font-size: 15px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #B4B3B3;
    }
  }

  .van-button {
    margin-top: 28px;
    width: 244px;
    height: 52px;
    background: linear-gradient(180deg, #FFFFFF 0%, #DEA2FC 100%);
    border-radius: 46px 46px 46px 46px;
    opacity: 1;
    font-size: 20px;
    font-family: DIN Pro-Regular, DIN Pro;
    font-weight: 400;
    color: #181818;
  }
}
</style>
